<template>
    <el-dialog
            :title="`正在修改 ${targetDir.name}`"
            :visible.sync="show"
            width="40%"
    >
        <el-form
                :model="dirInfo"
                label-width="90px"
                style="margin: auto;"
                :rules="rule"
                ref="form"
                v-loading="loadState"
                @submit.native.prevent
                @keyup.enter.native="sure"
        >
            <el-form-item label="文件夹名" prop="name">
                <el-input v-model="dirInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="description">
                <el-input type="textarea" v-model="dirInfo.description"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="sure">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "DirChanger",
        props:{
            changeFileUrl:{
                type:String,
                default:"/file/mv"
            },
        },
        data(){
            return{
                targetDir: {},
                currentDir: null,
                dirInfo:{
                    name: "",
                    description:"",
                },
                show: false,
                rule:{
                    name:[{required:true,message:"必须要有一个名字",trigger:"blur"}],
                },
                loadState: false,
            }
        },
        methods:{
            cancel(){
                this.show = false;
            },
            sure(){
                this.$refs.form.validate(valid=>{
                    if(valid){
                        this.loadState = true;
                        this.changeFileMeta(this.targetDir,this.dirInfo).then(()=>{
                            this.$message({
                                type: 'success',
                                message: '文件夹修改成功!'
                            });
                            this.$emit("change-success",this.currentDir);
                            this.show = false;
                        }).catch(err=>{
                            this.$alert(err.message, this.targetDir.name+' 修改失败!', {type:"error"});
                        }).finally(()=>{
                            this.loadState = false;
                        });
                    }else{
                        this.$message({
                            showClose: true,
                            message: "请填写文件夹名",
                            type: "error"
                        });
                    }
                });
            },
            open(currentDir,targetDir){
                this.targetDir = targetDir;
                this.currentDir = currentDir;
                this.dirInfo.name = targetDir.name;
                this.dirInfo.description = targetDir.description;
                this.show = true;
            },
            async changeFileMeta(source,targetMeta){
                const formData = new FormData();
                const NAME_KEY = "name",DES_KEY = "description";
                if(targetMeta.name !== source.name) formData.append(NAME_KEY,targetMeta.name);
                if(targetMeta.description !== source.description) formData.append(DES_KEY,targetMeta.description);
                formData.append("id",source.id);
                try {
                    await this.$http.put(this.changeFileUrl,formData);
                }catch (e) {
                    console.log(e);
                    let err = e;
                    if(err.response&&err.response.hasOwnProperty("data"))err = err.response.data;
                    throw err;
                }
                return null;
            },
        },
        mounted() {
            this.$on("open",this.open);
        }
    }
</script>

<style scoped>

</style>